<template>
  <div class="container">
    <div class="menu-list">
      <div @click="menuClick(item)" class="menu-item" v-for="item in menuList" :key="`menu${item.id}`">
        {{ item.name }}
      </div>
    </div>
    <div class="content-list">
      <div class="content-item" :id="item.id" v-for="item in contentList" :key="`content${item.id}`">
        <div class="title">{{ item.title }}</div>
        <div class="text">{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'

let menuList = reactive([])
let contentList = reactive([])

const initMenuList = () => {
  for (let i = 0; i < 10; i++) {
    menuList.push({
      id: 'menu' + i,
      name: `菜单项${i}`,
    })
    contentList.push({
      id: 'menu' + i,
      title: '标题 id: menu' + i,
      content: `文章内容...` // 内容保持不变
    })
  }
}

const menuClick = (item) => {
  const targetElement = document.getElementById(item.id)
  if (targetElement) {
    // 平滑滚动到元素顶部对齐
    targetElement.scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    })
  }
}

onMounted(() => {
  initMenuList()
})
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;

  .menu-list {
    position: fixed;
    top: 85px;
    left: 15px;
    width: 380px;
    background-color: white;
    height: calc(100vh - 100px);
    /* 添加菜单自身滚动 */
    overflow-y: auto;

    .menu-item {
      padding: 10px 15px;
      cursor: pointer;

      &:hover {
        background-color: #f0f0f0;
      }
    }
  }

  .content-list {
    margin-left: 400px;
    background-color: white;
    height: calc(100vh - 85px);
    /* 固定高度 */
    overflow-y: auto;
    /* 允许垂直滚动 */
    padding: 10px;

    .content-item {
      margin-bottom: 10px;
      min-height: 300px;
      /* 改为最小高度适应内容 */
      padding: 20px;
      background-color: #F7F9FA;
      border-radius: 8px;

      .title {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 15px;
      }

      .text {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}
</style>